<template>

	<view class="x-card" :style="{fontWeight,color,padding:padd,background,border,margin,fontSize,transform:isTouch?'scale(0.7)':'1'}"
		@touchstart="start">
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name: "x-card",
		props: {
			padd: {
				default: '20rpx'
			},
			border: {
				default: '2px solid #b18597'
			},
			fontSize: {
				default: '40rpx'
			},
			margin: {
				default: '0rpx'
			},
			background: {
				default: 'pink',
			},
			color: {
				default: '#000',
			},
			fontWeight: {
				default: '400',
			}
		},
		data() {
			return {
				isTouch: false
			};
		},
		methods: {
			start() {
				return
				this.isTouch = true
				setTimeout(() => {
					this.isTouch = false
				}, 300)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.x-card {
		border: 5rpx solid #550000;
		// box-shadow: 1px 3px 9px 0px #6f6f6f;
		border-radius: 20rpx;
		// width: max-content;
		background: pink;
		padding: 20rpx;
		font-weight: 400;
		font-size: 40rpx;
		color: #000000;
		line-height: 1.2;
	}
</style>